<template>
  <div class="registerwrap">
    <div class="takephoto" v-if="step=='2'">
      <yd-navbar class="photoNav" bgcolor="rgba(255,255,255,0)">
          <router-link to="/" slot="left">
              <yd-navbar-back-icon class="faceText" color="#fff">人脸识别</yd-navbar-back-icon>
          </router-link>
      </yd-navbar>
      <div class="photoText">请把面部放在人像框内</div>
      <img class="imgWrap" src="../assets/photoWrap.png">
      <video
          id="webcam"
          :style="videoStyle"
          :width="videoWidth"
          :height="videoHeight"
          loop
          preload
        >
      </video>
      <img
          :src="imgSrc"
          :style="imgStyle"
          class="face-img"
          v-if="imgSrc"
        />
      <div class="photoBtns">
        <span class="photoBtnWrap"></span>
        <span class="photoBtn" @click="takePhoto"></span>
      </div>
    </div>
    <div class="register" v-if="step=='1'">
      <img class="registerbg" src="../assets/registerbg.png">
      <text-header :title="title" :bgcolor="'rgba(1,1,1,0)'" :topath="'/login'" class="textHeader"></text-header>
      <div class="register-con">
        <yd-cell-item class="inputItem currentPhone">
            <span class="phonetext" slot="left">手机号</span>
        </yd-cell-item>
        <yd-cell-item class="inputItem phoneCode">
              <yd-input slot="right" v-model="registerPhone" required :show-success-icon="false" :show-error-icon="false" regex="mobile" ref="registerPhone" placeholder="请输入手机号码"></yd-input>
              <!-- ↓↓关键代码是这里↓↓ -->
              <yd-sendcode class="sendCodeBtn" slot="right" 
                           v-model="start" 
                           init-str="获取验证码"
                           second="60"
                           run-str="{%s}秒"
                           reset-str="获取验证码"
                           @click.native="sendCode"
              ></yd-sendcode>
              <!-- ↑↑关键代码是这里↑↑ -->

        </yd-cell-item>
        <yd-cell-item class="inputItem currentPhone">
            <span class="phonetext" slot="left">验证码</span>
        </yd-cell-item>
        <yd-cell-item class="inputItem phoneCode">
              <input v-model="registerPhoneCode" type="text" slot="right" placeholder="点击输入验证码">
        </yd-cell-item>
        <yd-cell-item class="inputItem currentPhone">
            <span class="phonetext" slot="left">密码</span>
        </yd-cell-item>
        <yd-cell-item class="inputItem phoneCode">
            <yd-input slot="right" type="password" min="8" regex="(?=^.*?\d)(?=^.*?[a-zA-Z])^[0-9a-zA-Z]{8,16}$" ref="registerPWD" v-model="registerPWD" placeholder="英文加数字不少于八位"></yd-input>
        </yd-cell-item>
        <yd-cell-item class="inputItem currentPhone">
            <span class="phonetext" slot="left">确认密码</span>
        </yd-cell-item>
        <yd-cell-item class="inputItem phoneCode">
            <yd-input slot="right" type="password" min="8" ref="registerPWDagain" regex="(?=^.*?\d)(?=^.*?[a-zA-Z])^[0-9a-zA-Z]{8,16}$" v-model="registerPWDagain" placeholder="英文加数字不少于八位"></yd-input>
        </yd-cell-item>
      </div>
      <!-- <div class="updatepw-con" v-if="showFlag=='1'">
        <yd-cell-item class="inputItem currentPhone">
            <input v-model="password" type="password" slot="right" placeholder="输入新密码英文加数字不少于八位"> -->
            <!-- <span class="phoneNumber" slot="right">{{currentPhone}}</span> -->
            <!-- <input class="" type="text" slot="right" placeholder="点击输入验证码"> -->
        <!-- </yd-cell-item>
        <yd-cell-item class="inputItem phoneCode">
              <input v-model="passwordagain" type="password" slot="right" placeholder="确认密码">
        </yd-cell-item>
      </div> -->
      <yd-button class="nextBtn" size="large" type="primary" v-if="step=='1'" @click.native="oneTo">下一步</yd-button>
    </div>
    <div class="register registerTwo" v-if="step=='3'||step=='4'||step=='5'">
      <img class="registerbg" src="../assets/registerbg.png">
      <text-header :title="title" :bgcolor="'rgba(1,1,1,0)'" :topath="'/login'" class="textHeader"></text-header>
      <div class="register-con" v-if="step=='3'">
        <div class="uploadModel">
          <el-upload
            class="uploadIcon"
            :headers="headerConfig"
            :action="uploadImg"
            :show-file-list="false"
            :on-success="success"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar avatar-uploader-icon">
            <img v-else src="../assets/status.png" class="avatar-uploader-icon">
          </el-upload>
          <div  class="uploadIconText">上传头像</div>
        </div>
        <yd-cell-item class="inputItem currentPhone">
            <span class="phonetext" slot="left">用户名</span>
        </yd-cell-item>
        <yd-cell-item class="inputItem phoneCode">
              <input v-model="userName" type="text" @blur="checkUserName()" slot="right" placeholder="控制在4-20个字符之间">
        </yd-cell-item>
        <yd-cell-item class="inputItem currentPhone phoneCode itemBorder">
            <span class="phonetext" slot="left">年龄</span>
            <input v-model="userAge" type="text" slot="right">
            <span class="unitSpan" slot="right">岁</span>
        </yd-cell-item>
        <yd-cell-item class="inputItem currentPhone itemBorder phoneCode" @click.native="selectSex">
            <span class="phonetext" slot="left">性别</span>
            <div :class="{'selectBtn':true,'selected':userSex==''}" slot="right">{{userSex==''?'请选择':userSex=='0'?'男':'女'}}</div>
        </yd-cell-item>
        <yd-cell-item class="inputItem currentPhone itemBorder phoneCode">
            <span class="phonetext" slot="left">身高</span>
            <yd-input class="noBorder" slot="right" v-model="bodyHeight" :show-clear-icon="false"></yd-input>
            <span class="unitSpan" slot="right">cm</span>
        </yd-cell-item>
        <yd-cell-item class="inputItem currentPhone itemBorder phoneCode">
            <span class="phonetext" slot="left">体重</span>
            <yd-input class="noBorder" slot="right" v-model="bodyWeight" :show-clear-icon="false"></yd-input>
            <span class="unitSpan" slot="right">kg</span>
        </yd-cell-item>
      </div>
      <div class="register-record" v-if="step=='4'">
        <div class="recordList">
          <div :class="{'recordItem':true,'selected':selectedRecord.indexOf(item.id)>=0}" v-for="(item,i) in recordList" :key="i" @click="selectRecord(item.id)">
            {{item.caseName}}
          </div>
        </div>
      </div>
      <div class="register-topic" v-if="step=='5'">
        <div class="topicList">
          <div :class="{'topicItem':true,'selected':selectedTopic.indexOf(item.id)>=0}" v-for="(item,i) in topicList" :key="i" @click="selectTopic(item.id)">
            {{item.healthName}}
          </div>
        </div>
      </div>
      <!-- <div class="updatepw-con" v-if="showFlag=='1'">
        <yd-cell-item class="inputItem currentPhone">
            <input v-model="password" type="password" slot="right" placeholder="输入新密码英文加数字不少于八位"> -->
            <!-- <span class="phoneNumber" slot="right">{{currentPhone}}</span> -->
            <!-- <input class="" type="text" slot="right" placeholder="点击输入验证码"> -->
        <!-- </yd-cell-item>
        <yd-cell-item class="inputItem phoneCode">
              <input v-model="passwordagain" type="password" slot="right" placeholder="确认密码">
        </yd-cell-item>
      </div> -->
      <div class="stepPoints">
        <span :class="{'stepPoint':true,'currentStep':step=='3'}"></span>
        <span :class="{'stepPoint':true,'currentStep':step=='4'}"></span>
        <span :class="{'stepPoint':true,'currentStep':step=='5'}"></span>
      </div>
      <yd-button class="nextBtn" size="large" type="primary" v-if="step!='2'&&step!='2'" @click.native="nextBtn">{{step=='5'?'完成':'下一步'}}</yd-button>
    </div>
    <yd-actionsheet :items="sexSelect" v-model="showSex"></yd-actionsheet>
  </div>
  
</template>

<script>
import textHeader from "../components/TextHeader";
import noiseImg from "../assets/noise.gif";
import URL from "../until/urlConfig.js";
import until from "../until/until.js";
import md5 from 'js-md5';
export default {
  name:'register',
  components: {
    textHeader
  },
  data() {
    return {
      uploadImg:URL.uploadImg,
      title:'注册',
      currentPhone:'18301638064',//当前手机号
      checkCode:'',
      registerPhone:'',
      registerPhoneCode:'',
      registerPWD:'',
      registerPWDagain:'',
      start: false,
      password:'',
      passwordagain:'',
      showFlag:'0',
      step:'1',
      videoWidth: window.innerWidth,
      videoHeight:window.innerHeight,
      videoStyle: {
          backgroundImage: "url(" + noiseImg + ")"
      },
      bodyHeight:'',
      bodyWeight:'',
      videoShow:null,
      imgSrc: null,
      canvas: null,
      intervalId: null,
      mediaStreamTrack: null,
      showSex:false,
      sexSelect:[
        {
            label: '男',
            callback: () => {
                this.userSex='0';
            }
        },
        {
            label: '女',
            callback: () => {
                this.userSex='1';
            }
        }
      ],
      imageUrl:'',
      recordList:[],
      topicList:[],
      selectedTopic:[],
      selectedRecord:[],
      userName:'',
      userNameFlag:false,
      userAge:'',
      userSex:'',
    };
  },
  methods: {
    msgAlert(msg){
      this.$dialog.toast({
          mes: msg,
          timeout: 1500
      });
    },
    checkUserName(){
      if(this.userName!=''){
        this.userNameFlag = false;
        this.$http.get(URL.checkUserName+'?userName='+this.userName)
        .then(res=>{
          this.userNameFlag=true;
        })
      }
    },
    sendCode() {
        // this.$dialog.loading.open('发送中...');
        if(this.registerPhone==''){
          this.$dialog.toast({
              mes: '请输入手机号',
              timeout: 1500
          });
          return;
        }
        this.$http.get(URL.getPhoneCode+'?phone='+this.registerPhone)
        .then(res=>{
          this.registerPhoneCode=res.data[0];
          this.start = true;
        })
        
    },
    oneTo(){
      const registerPhone = this.$refs.registerPhone;
      if(!registerPhone.valid){
        this.$dialog.toast({
            mes: '请输入正确手机号',
            timeout: 1500
        });
        return;
      }
      if(this.registerPhoneCode==''){
        this.$dialog.toast({
          mes:'请输入验证码',
          timeout:1500
        });
        return;
      }
      const registerPWD = this.$refs.registerPWD;
      if(!registerPWD.valid){
        this.$dialog.toast({
          mes:'请输入正确格式密码',
          timeout:1500
        });
        return;
      }
      if(this.registerPWD!=this.registerPWDagain){
        this.$dialog.toast({
          mes:'两次输入密码不一致',
          timeout:1500
        });
        return;
      }
      this.axios.post(URL.register,JSON.stringify({
        phone:this.registerPhone,
        code:this.registerPhoneCode,
        password:md5(this.registerPWD)
      }),{headers:{"Content-Type": "application/json;charset=UTF-8"}})
      .then(res=>{
          this.$http.post(URL.login,JSON.stringify({
            phone:this.registerPhone,
            type:'front',
            password:md5(this.registerPWD),
            isRemember:'0'
          }))
          .then(res=>{
            localStorage.setItem('ydtoken',res.data[0]||'');
            this.step='2';
            this.$nextTick(()=>{
              this.initVideo();
              this.uuid = localStorage.getItem("uuid");
            })
          })
      })
    },
    initVideo() {
      let that = this;
      // this.video = document.getElementById("face-result");
      this.videoShow = document.getElementById("webcam");
      // this.video.setAttribute('width', that.videoWidth);
      // this.video.setAttribute('height', that.videoHeight);
      this.canvas = document.createElement("canvas");
      this.canvas.setAttribute("width", this.videoWidth);
      this.canvas.setAttribute("height", this.videoHeight);
      this.imgStyle = {
        width: that.videoWidth + "px",
        height: that.videoHeight + "px"
      };
      setTimeout(() => {
        if (
          navigator.mediaDevices.getUserMedia ||
          navigator.getUserMedia ||
          navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia
        ) {
          //调用用户媒体设备, 访问摄像头
          // this.$toast.center("width:" + this.videoWidth);
          // this.$toast.center("height:" + this.videoHeight);
          this.getUserMedia(
            {
              video: {
                width: {
                  ideal: that.videoWidth
                  // max: that.videoWidth
                  // ideal: that.videoWidth,
                },
                height: {
                  ideal: that.videoHeight
                  // max: that.videoHeight
                  // ideal: that.videoHeight,
                },
                facingMode: "user",
                frameRate: {
                  ideal: 30,
                  min: 10
                }
              }
            },
            this.videoSuccess,
            this.videoError
          );
          // this.$toast.center("初始化摄像头打开失败：navigator is  not null");
        } else {
            this.$dialog.toast({
            mes: '摄像头打开失败,请检查权限设置!',
            timeout: 1500
        });
            // this.$toast.center("初始化摄像头打开失败：navigator is null");
        }
      }, 300);
    },
    selectSex(){
      console.log(this.showSex);
      this.showSex = true;
    },
    takePhoto() {
      if (this.canvas) {
        let context = this.canvas.getContext("2d");
        context.drawImage(
          this.videoShow,
          0,
          0,
          this.videoWidth,
          this.videoHeight
        );
        this.imgSrc = this.canvas.toDataURL("image/png");
        // let imgData = this.canvas.toDataURL().substring(22);
        // console.log(imgData);
        // this.getAccessToken(imgData);

        let that = this;
        // that.faceFunction = "识别中...";
        let base64Data = this.canvas.toDataURL();
        let blob = this.dataURItoBlob(base64Data);
        var file = new FormData();
        file.append("file", blob);
        file.append("key", that.uuid);
        this.axios
          .post(URL.baiduAI, file, {
            headers: {
              "Content-Type": "multipart/form-data",
              "Authorization":'Bearer '+localStorage.getItem('ydtoken')||''
            }
          })
          .then(function(response) {
            if ((response.status = 200)) {
              if (response.data.code == "200") {
                // that.faceFunction = "点击识别";
                var result = response.data.data;
                result.forEach(item => {
                  item.beauty = Math.ceil(item.beauty);
                  if (!item.recommend) {
                    item["recommend"] = ["美的我都看不见你了"];
                  }
                  if (!item.face) {
                    item["face"] = "暂无推荐";
                  }
                  if(item.sex=='帅锅'){
                    that.userSex = '0'
                  }else if(item.sex=='美铝'){
                    that.userSex='1'
                  }
                  that.userAge = item.age;
                });
                // that.faceResult = result;
                that.imgSrc = null;
              } else {
                var failed = {
                  age: "未知",
                  beauty: "未知",
                  recommend: ["美的我都看不见你了"],
                  sex: "不知男女",
                  face: "暂无推荐"
                };
                that.faceResult = [failed];
                // that.faceFunction = "点击识别";
                that.imgSrc = null;
              }
              that.step = '3';
            } else {
              that.faceResult = [failed];
              // that.faceFunction = "点击识别";
              that.imgSrc = null;
            }
          })
          .catch(function(error) {
            console.error(error);
            that.imgSrc = null;
            that.faceResult = [failed];
            // that.faceFunction = "点击识别";
          });
      } else {
        that.imgSrc = null;
        this.$dialog.toast({
          mes: '摄像未加载完成',
          timeout: 1500
      });
      }
    },
    //base64转换为Blob
    dataURItoBlob(base64Data) {
      var byteString;
      if (base64Data.split(",")[0].indexOf("base64") >= 0)
        byteString = atob(base64Data.split(",")[1]);
      else byteString = unescape(base64Data.split(",")[1]);
      var mimeString = base64Data
        .split(",")[0]
        .split(":")[1]
        .split(";")[0];
      var ia = new Uint8Array(byteString.length);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], { type: mimeString });
    },
    getUserMedia(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then(success)
          .catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints, success, error);
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
      }
    },
    videoSuccess(stream) {
      this.mediaStreamTrack = stream;
      this.videoShow.srcObject = stream;
      this.videoShow.play();
      // setTimeout(() => {
      //   this.takePhoto();
      // }, 150);
    },
    videoError(error) {
        console.error(error);
        this.$dialog.toast({
          mes: '摄像头打开失败,请检查权限设置!',
          timeout: 1500
      });
    },
    success(res, file) {
      // console.log(file);
      this.imageUrl = file.response.data[0];
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    },
    selectRecord(id){
      if(this.selectedRecord.indexOf(id)>=0){
        this.selectedRecord.splice(this.selectedRecord.indexOf(id),1);
      }else{
        this.selectedRecord.push(id);
      }
    },
    selectTopic(id){
      if(this.selectedTopic.indexOf(id)>=0){
        this.selectedTopic.splice(this.selectedTopic.indexOf(id),1);
      }else{
        this.selectedTopic.push(id);
      }
    },
    nextBtn(){
      if(this.step=='3'){
        if(this.imageUrl==''){
          this.msgAlert('请上传用户头像');
          return;
        }
        if(this.userName==''){
          this.msgAlert('请输入用户名');
          return;
        }
        if(!this.userNameFlag){
          this.msgAlert('用户名已经存在');
          return;
        }
        if(this.userAge==''){
          this.msgAlert('请输入年龄');
          return;
        }
        if(this.userSex==''){
          this.msgAlert('请选择性别');
          return;
        }
        if(this.bodyHeight==''){
          this.msgAlert('请输入身高');
          return;
        }
        if(this.bodyWeight==''){
          this.msgAlert('请输入体重');
          return;
        }
        if (this.videoShow) {
          this.closeVideoStream();
          this.videoShow.pause();
          this.videoShow = null;
          this.canvas = null;
          this.mediaStreamTrack = null;
        }
        this.step='4';
        this.getIllnessList();
      }else if(this.step=='4'){
        this.step='5';
        this.getTopicList();
      }else if(this.step=='5'){
        var recordArr = [],topicArr = [];
        if(this.selectedRecord.length>0){
          this.selectedRecord.forEach((item,i)=>{
            recordArr.push({id:item})
          })
        }
        if(this.selectedTopic.length>0){
          this.selectedTopic.forEach((item,i)=>{
            topicArr.push({id:item});
          });
        }
        var params = {
          userUrl:this.imageUrl,
          userName:this.userName,
          age:this.userAge,
          gender:this.userSex,
          height:this.bodyHeight,
          weight:this.bodyWeight,
          caseAttention:recordArr,
          healthAttention:topicArr
        }
        this.$http.post(URL.registerInfo,JSON.stringify(params))
        .then(res=>{
          this.$router.push('/index');
        })
      }
    },
    closeVideoStream() {
      if (this.mediaStreamTrack) {
        this.mediaStreamTrack.getTracks().forEach(function(track) {
          track.stop();
        });
      }
    },
    getIllnessList(){
      this.$http.get(URL.getIllnessList)
      .then(res=>{
        this.recordList = res.data;
      })
    },
    getTopicList(){
      this.$http.get(URL.getTopicList)
      .then(res=>{
        this.topicList = res.data;
      })
    }
  },
  computed: {
    osName() {
      return this.$store.state.osName;
    },
    headerConfig: function () {
      let TOKEN = 'Bearer '+ localStorage.getItem('ydtoken');
      return {'Authorization': TOKEN}
    },
  },
  created() {},
  mounted() {
    // this.initUserInfo();
  }
};
</script>
<style lang="scss">
@import "../style/public.scss";
.registerwrap{
  .register {
    height:100%;
    .registerbg{
      height:100%;
      width:100%;
      position:absolute;
      top:0;
      left:0;
    }
    .register-con{
      margin:rem(88) rem(96) 0;
      .currentPhone{
        font-size:rem(28);
        padding-left:0;
        margin-top:rem(20);
        input::-webkit-input-placeholder {
          color: #7c867c;
          font-family:'Microsoft Yahei';
          font-size:rem(14);
        }
        .noBorder.yd-input{
          border:none;
        }
        .yd-cell-right{
          padding-right:0;
        }
        .phonetext{
          color:#fff;
          font-size:rem(32);
        }
        .phoneNumber{
          color:#bcc1bc;
        }
        input{
          text-align:right;
          color:#7c867c;
        }
      }
      .phoneCode{
        color:#fff;
        padding-left:0;
        .yd-input-password:after{
          color:rgba(255,255,255,.3);
        }
        .yd-input-clear:after{
          color:rgba(255,255,255,.3);
        }
        .yd-input-success:after{
          color:rgba(255,255,255,.3);
        }
        .yd-input-warn{
          display:none;
        }
        .yd-input{
          border-bottom:rem(2) solid rgba(255,255,255,.5);
          input{
            border-bottom:none;
          }
        }
        input{
          color:#fff;
          font-size:rem(52);
          height:rem(80);
          line-height:rem(80);
          border-bottom:rem(2) solid rgba(255,255,255,.5); 
        }
        input::-webkit-input-placeholder {
          color: #aae6ac;
          font-family:'Microsoft Yahei';
          font-size:rem(32);
        }
        .yd-cell-right{
          padding-right:0;
        }
        .sendCodeBtn{
          font-family:'Microsoft Yahei';
          padding:0;
          font-size:rem(16);
          border-radius:rem(32);
          height:rem(64);
          line-height:rem(64);
          margin-left:rem(22);
          width:rem(200);
          text-align:center;
          background:rgba(255, 255, 255, 0.3);
          color:#fff;
        }
      }
    }
    .updatepw-con{
      .currentPhone{
        border-bottom:rem(2) solid #f8f8f8;
        font-size:rem(28);
        margin:0 0.2rem;
        padding-left:0;
        input{
          color:#7c867c;
        }
        input::-webkit-input-placeholder {
          color: #7c867c;
          font-family:'Microsoft Yahei';
          font-size:rem(14);
        }
      }
      .phoneCode{
        font-size:rem(28);
        color:#7c867c;
        input{
          color:#7c867c;
        }
        input::-webkit-input-placeholder {
          color: #7c867c;
          font-family:'Microsoft Yahei';
          font-size:rem(14);
        }
      }
    }
    .nextBtn{
      font-family:'Microsoft Yahei';
      width:calc(100% - 2.56rem);
      margin:rem(90) auto 0;
      font-size:rem(32);
      height:rem(76);
      border-radius:rem(38);
      color:$defaultcolor;
      &.yd-btn-primary{
        background-color:#fff;
      }
      line-height:rem(76);
      font-weight:100;
    }
  }
  .takephoto{
    .photoNav{
      position:absolute;
      z-index:5;
      width:100%;
      .faceText{
        color:#fff;
        font-size:rem(32);
      }
    }
    .photoText{
      position:absolute;
      top:rem(400);
      z-index:6;
      width:100%;
      color:#fff;
      text-align:center;
      font-size:rem(32);
    }
    .face-img{
      position:absolute;
      top:0;
      left:0;
      z-index:6;
    }
    .imgWrap{
      position:absolute;
      top:0;
      left:0;
      width:100%;
    }
    .photoBtns{
      position:absolute;
      bottom:rem(100);
      text-align:center;
      width:100%;
      height:rem(130);
      z-index:6;
      line-height:rem(130);
      .photoBtnWrap{
        position:absolute;
        display:inline-block;
        height:rem(130);
        width:rem(130);
        left:50%;
        background:rgba(255,255,255,.2);
        transform:translateX(-50%);
        border-radius:50%;
      }
      .photoBtn{
        position:absolute;
        display:inline-block;
        height:rem(100);
        width:rem(100);
        left:50%;
        transform:translate(-50%,rem(15));
        background:#fff;
        border-radius:50%;
      }
    }
  }
  .registerTwo{
    .register-con{
      .phoneCode{
        height:rem(80);
        .selectBtn{
          width:100%; 
          height:rem(80);
          line-height:rem(80);
          color: #aae6ac;
          font-family:'Microsoft Yahei';
          font-size:rem(32);
        }
        .unitSpan{
          height:rem(80);
          line-height:rem(80);
          color: #aae6ac;
          font-family:'Microsoft Yahei';
          font-size:rem(32);
        }
        &.itemBorder{
          border-bottom:rem(2) solid rgba(255,255,255,.5);
          input{
            border:none;
            padding:0 rem(10);
          }
        }
      }
      .uploadModel{
        display:flex;
        flex-direction:column;
        width:100%;
        z-index:6;
        .uploadIconText{
          z-index:6;
          font-size:rem(32);
          color:#fff;
          margin-top:rem(18);
          text-align:center;
        }
        .uploadIcon{
          margin:0 auto;
          background:#fff;
          border-radius:rem(76);
          z-index:6;
          width:rem(152);
          height:rem(152);
          .avatar-uploader-icon{
            display:inline-block;
            height:rem(152);
            width:rem(152);
            border-radius:rem(76);
          }
        }
      }
    }
    .stepPoints{
      display:flex;
      z-index:6;
      justify-content:center;
      margin-top:rem(48);
      .stepPoint{
        z-index:7;
        display:inline-block;
        width:rem(20);
        margin-right:rem(34);
        height:rem(20);
        border-radius:rem(10);
        border:rem(2) solid rgba(255,255,255,.3);
        &.currentStep{
          background:#fff;
        }
      }
    }
    .nextBtn{
      margin:rem(48) auto 0;
    }
    .register-record{
      height:rem(804);
      .recordList{
        display:flex;
        position:absolute;
        padding:0 rem(96);
        height:rem(804);
        overflow:auto;
        flex-direction:column;
        width:100%;
        .recordItem{
          flex:1;
          z-index:6;
          color:#fff;
          height:rem(78);
          margin-top:rem(60);
          font-size:rem(32);
          line-height:rem(76);
          border-radius:rem(39);
          border:rem(2) solid rgba(255,255,255,.3);
          &.selected{
            background:#22a114;
          }
        }
      }
      
      z-index:6;
    }
    .register-topic{
      height:rem(804);
      .topicList{
        width:100%;
        display:flex;
        padding:0 rem(96);
        align-content: flex-start;
        position:absolute;
        height:rem(804);
        overflow:auto;
        flex-wrap:wrap;
        justify-content:space-between;
        .topicItem{
          width:calc(50% - 0.2rem);
          z-index:6;
          color:#fff;
          height:rem(78);
          margin-top:rem(60);
          font-size:rem(32);
          line-height:rem(76);
          border-radius:rem(39);
          border:rem(2) solid rgba(255,255,255,.3);
          &.selected{
            background:#22a114;
          }
        }
      }
      
      z-index:6;
    }
  }
}

</style>